/**
 * @file 公共检索列表的出口
 * @author its-wild(https://gitee.com/its-wild)
 * @date 2021/12/02
 */
import { ref, Ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import { get } from '@/utils/axios'

export interface ISpan {
  xs?: number
  sm?: number
  md?: number
  lg?: number
  xl?: number
  xxl?: number
}

export interface IPagination {
  /**
   * 当前页面码
   */
  current: number
  /**
   * 分页条数，默认10
   */
  pageSize: number
  /**
   * 指定每页可以显示多少条
   */
  pageSizeOptions: string[]
  /**
   * 用于显示数据总量和当前数据顺序
   */
  showTotal: (total: number, range: number[]) => string
  /**
   * 是否可以快速跳转至某页
   */
  showQuickJumper: boolean
  /**
   * 是否可以改变 pageSize
   */
  showSizeChanger: boolean
  /**
   * 数据总数
   */
  total: number
}

export interface ISearchList {
  /**
   * 检索条件的栅格
   */
  span: ISpan

  /**
   * 加载状态
   */
  loading: Ref<boolean>

  /**
   * 设置加载状态
   */
  setLoading: (val: boolean) => void

  /**
   * 分页参数
   */
  pagination: IPagination

  /**
   * 列表数据
   */
  list: Ref<any[]>

  /**
   * 设置列表数据
   */
  setList: <T>(val: T[]) => void

  /**
   * 加载列表数据
   */
  loadList: () => void

  /**
   * 分页、排序、筛选变化时触发
   * @param {object} pagination 分页信息
   * @return {void} 
   */
  handleTableChange: (pagination: any) => void

  /**
   * 检索
   */
  onSearch: () => void

  /**
   * 重置
   */
  onResetSearch: () => void

  /**
   * 展示更多检索条件
   */
  showMoreSearch: Ref<boolean>

  /**
   * 是否显示添加/编辑表单
   */
  showForm: Ref<boolean>

  /**
   * 设置是否显示添加/编辑表单
   */
  setShowForm: (val: boolean) => void

  /**
   * 当前编辑数据
   */
  mdl: Ref<any>

  /**
   * 设置当前编辑数据
   */
  setMdl: (val: any) => void

  /**
   * 编辑
   */
  onEdit: (record?: any) => void

  /**
   * 添加或编辑点确认
   */
  onOk: () => void

  /**
   * 删除
   */
   onDelete: (record: any) => void
}

export default function searchList<T, U>(params: T, urls: U): ISearchList {
  const prms = params as any
  const url = urls as any

  const loading = ref<boolean>(false)
  const setLoading = (val: boolean) => {
    loading.value = val
  }

  const pagination = reactive({
    current: 1,
    pageSize: 10,
    pageSizeOptions: ['10', '20', '30', '50', '100'],
    showTotal: (total: number, range: number[]) => {
      return range[0] + '-' + range[1] + ' 共' + total + '条'
    },
    showQuickJumper: true,
    showSizeChanger: true,
    total: 0,
  })

  // 列表
  const list = ref<any[]>([])
  const setList = <T>(val: T[]) => {
    list.value = val
  }

  // 加载列表数据
  const loadList = async () => {
    const query = {
      pageNum: pagination.current,
      pageSize: pagination.pageSize,
      ...prms
    }

    if (!url.list) {
      message.warning('请设置urls.list属性~')
      return
    }

    setLoading(true)
    const res = await get(url.list, { params: query })
    setLoading(false)
    const { list, total } = (res as any)
    pagination.total = total || 0
    setList(list || [])
  }

  // 分页、排序、筛选变化时触发
  const handleTableChange = (pgntn: any) => {
    pagination.current = pgntn.current
    loadList()
  }

  // 检索
  const onSearch = () => {
    pagination.current = 1
    loadList()
  }

  const onResetSearch = () => {
    for (const i in params) {
      (params as any)[i] = undefined
    }
    onSearch()
  }

  // 更多检索条件
  const showMoreSearch = ref(false)

  // 是否显示添加/编辑表单
  const showForm = ref(false)
  const setShowForm = (val: boolean) => {
    showForm.value = val
  }

  // 添加/编辑
  const mdl = ref({})
  const setMdl = (val: any) => {
    mdl.value = val
  }
  const onEdit = (record?: any) => {
    setMdl(record)
    setShowForm(true)
  }
  // 添加或编辑点确认
  const onOk = () => {
    setShowForm(false)
    loadList()
  }

  // 删除
  const onDelete = (record: any) => {
    console.log(record)
  }

  return {
    span: {
      md: 12,
      lg: 8,
      xl: 6,
      xxl: 4
    },
    loading,
    setLoading,
    pagination,
    list,
    setList,
    loadList,
    handleTableChange,
    onSearch,
    onResetSearch,
    showMoreSearch,
    showForm,
    setShowForm,
    mdl,
    setMdl,
    onEdit,
    onOk,
    onDelete,
  }
}